<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-row type="flex">
          <el-col>
            <el-form-item prop="createTime">
              <el-date-picker v-model="queryParams.createTime" value-format="yyyy-MM-dd" type="date" placeholder="注册时间:请选择注册时间" @change="getList"/>
            </el-form-item>
          </el-col>
          
          <el-col>
            <el-form-item prop="phonenumber">
              <el-input v-model="queryParams.phonenumber" @keyup.enter.native="getList" clearable
                        placeholder="注册手机:请输入注册手机"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col>
            <el-form-item prop="nickName">
              <el-input v-model="queryParams.nickName" @keyup.enter.native="getList" clearable
                        placeholder="用户昵称:请输入用户昵称"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col>
            <el-form-item prop="userName">
              <el-input v-model="queryParams.userName" @keyup.enter.native="getList" clearable
                        placeholder="用户实名:请输入用户实名"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col>
            <el-form-item prop="status">
              <el-select v-model="queryParams.status" clearable placeholder="状态:请选择状态" @change="getList">
                <el-option label="禁用" value="1"></el-option>
                <el-option label="正常" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div class="table-btn">
        <div class="table-btn-item" @click="getList">
          <img src="@/assets/images/refresh.png" title="刷新"/>
        </div>
        <div class="table-btn-item" title="重置" @click="handleReset">
          <img src="@/assets/images/search.png"/>
        </div>
      </div>
    </el-card>
    
    <!--功能-->
    <div class="funcs">
      <div class="funcs-title">客户管理</div>
    </div>
    
    <div class="section">
      <el-table v-loading="tableLoading" :data="tableData" stripe>
        <el-table-column align="center" type="selection" width="70"/>
        <el-table-column label="状态" align="center" prop="status" min-width="80">
          <template v-slot="scope">
            <el-tag type="danger" v-if="scope.row.status == 1">禁用</el-tag>
            <el-tag v-else>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center" prop="createTime" min-width="120" show-overflow-tooltip/>
        <el-table-column label="注册手机" align="center" prop="phonenumber" min-width="100" show-overflow-tooltip/>
        <el-table-column label="用户昵称" align="center" prop="nickName" min-width="120" show-overflow-tooltip/>
        <el-table-column label="用户实名" align="center" prop="userName" min-width="120" show-overflow-tooltip/>
        <el-table-column label="性别" align="center" prop="sex" min-width="80">
          <template v-slot="scope">
            <el-tag v-if="scope.row.sex == 1">女</el-tag>
            <el-tag type="info" v-else-if="scope.row.sex == 0">男</el-tag>
            <el-tag type="danger" v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="密码" align="center" prop="password" min-width="140" show-overflow-tooltip/>
        <el-table-column label="余额" align="center" prop="balance" min-width="140" show-overflow-tooltip/>
        <el-table-column label="最后登录时间" align="center" prop="loginDate" min-width="120" show-overflow-tooltip/>
        <el-table-column label="最后登录IP" align="center" prop="loginIp" min-width="130" show-overflow-tooltip/>
        <el-table-column fixed="right" label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleUpdate(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">查看信息 </span>
            </el-button>
            
            <el-dropdown @command="handleDropwnClick">
              <span class="el-dropdown-link" style="color:#535AF4;">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">消息通知</el-dropdown-item>
                <el-dropdown-item command="account">禁用账户</el-dropdown-item>
                <el-dropdown-item command="login">登录IP</el-dropdown-item>
                <el-dropdown-item command="update">修改信息</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination v-show="tableTotal > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="tableTotal"
                  class="pagination" @pagination="getList('')"/>
    </div>
    
    <!--修改 添加-->
    <!--<edit ref="editRef" :title="title"></edit>-->
  </div>
</template>

<script>
    import {customerListApi} from '@/api/business/customer.js'
    // import edit from "./components/edit.vue";

    export default {
        data() {
            return {
                title: '',
                tableData: [],
                tableTotal: 0,
                tableLoading: false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    phonenumber: '',
                    nickName: '',
                    userName: '',
                    status: '',
                    createTime:null
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            // 下拉菜单点击 info-消息通知 account-禁用账户 login-登录IP update-修改信息
            handleDropwnClick(e) {
                switch (e) {
                    case 'info':
                        break;
                    case 'account':
                        break;
                    case 'login':
                        break;
                    case 'update':
                        break;
                }
            },

            // 添加
            handleAdd() {
                this.title = '新增';
                this.$refs.editRef.open();
            },

            // 查询列表
            getList(e) {
                this.tableLoading = true;
                customerListApi(this.queryParams).then(res => {
                    this.tableLoading = false
                    this.tableData = res.rows;
                    this.tableTotal = res.total;

                }).catch(() => {
                    this.tableLoading = false
                })
            },

            // 修改
            handleUpdate(row) {
                this.open = true;
                this.title = "编辑游戏";
                this.form = {...row}
            },

            //新增 表单重置
            reset() {
                this.resetForm("form");
            },

            // 提交
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.dictCode != null) {
                            updateData(this.form).then(response => {
                                this.$modal.msgSuccess("编辑成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addData(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },

            // 删除
            handleDelete(row) {
                console.log(row);
                this.resetQuery();
                delData(row.dictCode).then(response => {
                    this.$modal.msgSuccess("删除成功");
                    this.getList();
                })
            },
            
            // 重置
            handleReset(){
                this.resetForm('queryForm');
                this.queryParams.pageNum = 1;
                this.getList();
            },
            
            // 搜索
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            // 时间
            searchDateChange(e){
                console.log(e)
            }
        }
    };
</script>
